<template>
  <van-skeleton :loading="props.loading">
    <template #template>
      <div :style="{ display: 'flex', width: '100%' }">
        <slot name="ske"></slot>

        <!-- <van-skeleton-image />
        <van-skeleton-paragraph row-width="60%" />
        <van-skeleton-title row-width="60%" />
        <van-skeleton-avatar row-width="60%" /> -->
      </div>
    </template>
    <slot name="main"></slot>
  </van-skeleton>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
let props = defineProps({
  loading: {
    type: Boolean,
    default: true,
  },
});
</script>

<style lang="scss">
.van-skeleton-image,
.van-skeleton-paragraph,
.van-skeleton-title,
.van-skeleton-avatar {
  background-color: rgb(50, 53, 62);
}
</style>
